
Ext.define('FrontSuite.view.Viewport', {
    extend: 'Ext.container.Viewport',

    id            : 'vp',
    layout        : 'border',
    items         : null,
    appToolbar    : null,
    navAccordion  : null,
    infoAccordion : null,

    constructor: function (id) {
        if (id) {
            this.id = id;
        }
        this.appToolbar       = Ext.create('FrontSuite.view.AppToolbar');
        this.navAccordion     = Ext.create('FrontSuite.view.NavAccordion');
        this.infoAccordion    = Ext.create('FrontSuite.view.InfoAccordion');

        this.items  = [
          {
            region      : 'north',
            id          : 'vp-region-header',
            bbar        : this.appToolbar,
            border      : false,
            margins     : '0 0 0 0'
          },
          {
            region      : 'west',
            id          : 'vp-region-nav',
            title       : 'Navigation',
            collapsible : true,
            width       : 250,
            split       : true,
            bodyStyle   : 'padding: 2px;',
            layout : {
                type    : 'fit',
                align   : 'stretch',
                pack    : 'start'
            },
            items       : [ this.navAccordion ]
          },
          {
            region      : 'east',
            id          : 'vp-region-info',
            title       : 'Messages / Info',
            collapsible : true,
            collapsed   : true,
            split       : true,
            width       : 400,
            bodyStyle   : 'padding: 2px',
            layout : {
                type    : 'fit',
                align   : 'stretch',
                pack    : 'start'
            },
            items       : [ this.infoAccordion ]
          },
          {
            region      : 'center',
            xtype       : 'tabpanel',
            id          : 'vp-region-tabpanel'
          }
        ];

        this.superclass.constructor.call(this, id);
        return(this);
    },

    refresh: function () {
        this.appToolbar.refresh();
        this.navAccordion.refresh();
        this.infoAccordion.refresh();
        FrontSuite.app.refreshTabPanel();
    }
});

